
<template>
	<view class="guarantee">
		<view class="guarantee_head">
			<view class="back" @click="navigateBack()">
			</view>
		</view>
		<view class="guarantee_content">
			<view class="title">
				中介包赔介绍
			</view>
			<view class="dec">
				买卖双方在其他渠道沟通协商好交易价格等内容一致后，在淘气游APP找到对应游戏客服，由客服发起中介担保交易。
			</view>
			<view class="title">
				联系客服
			</view>
			<view class="list">
				<view class="list_item" v-for="item in guarantee_data" :key="item.id">
					<view class="list_item_text">{{item.name}}</view>
					<view class="list_item_code" :style="{backgroundImage:'url('+item.img+')'}"></view>
					<button class="list_item_btn" @click="save(item)">保存至相册</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { guarantee_list } from '@/api/guarantee'
	export default {
		data(){
			return {
				guarantee_data: [],
				codeLisrt:[ 
					{ 
						name: '永劫无间客服南阳', 
						code: '../../static/account/bubble_1@2x.png'
					},
					{
						name: '英雄联盟客服无物', 
						code: '../../static/salesCases/icon_back@2x.png'
					},
					{
						name: '永劫无间客服南阳', 
						code: '../../static/account/bubble_1@2x.png'
					},
					{
						name: '英雄联盟客服无物', 
						code: '../../static/account/bubble_1@2x.png'
					},
					{
						name: '永劫无间客服南阳', 
						code: '../../static/account/bubble_1@2x.png'
					},
					{
						name: '永劫无间客服南阳', 
						code: '../../static/account/bubble_1@2x.png'
					}
				]
			}
		},
		onLoad() {
			this.guarantee_list()
		},
		methods:{
			async guarantee_list(){
				let data = await guarantee_list()
				if (data) {
					this.guarantee_data = data.data
				}
			},
			save(item){
				let imageUrl = item.img;
				 
				// 首先下载图片
				uni.downloadFile({
				    url: imageUrl,
				    success: downloadResult => {
				        if (downloadResult.statusCode === 200) {
				            // 下载成功，保存图片到系统相册
				            uni.saveImageToPhotosAlbum({
				                filePath: downloadResult.tempFilePath,
				                success: () => {
				                    uni.showToast({
				                        title: '图片保存成功'
				                    });
				                },
				                fail: () => {
				                    uni.showToast({
				                        title: '图片保存失败',
				                        icon: 'none'
				                    });
				                }
				            });
				        } else {
				            uni.showToast({
				                title: '图片下载失败',
				                icon: 'none'
				            });
				        }
				    },
				    fail: () => {
				        uni.showToast({
				            title: '图片下载失败',
				            icon: 'none'
				        });
				    }
				});
				
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.guarantee {
		.guarantee_head {
			height: 336rpx;
			background: url(~@/static/sell/bg_zj1@2x.png) no-repeat;
			background-size: 100%;
			.back {
				position: absolute;
				top: 116rpx;
				left: -10rpx;
				height: 30px;
				width: 30px;
				margin-left: 30px;
				background: url(~@/static/salesCases/icon_back@2x.png) no-repeat;
				background-size: 100%;
			}
		}
		.guarantee_content {
			position: relative;
			background: #FFFFFF;
			padding: 0 30rpx;
			&::after {
				content: "";
				position: absolute;
				top: -30rpx;
				left: 0;
				right: 0;
				width: 100%;
				height: 30rpx;
				background: #FFFFFF;
				border-radius: 40rpx 40rpx 0px 0rpx;
			}
			.title {
				font-weight: 800;
				font-size: 32rpx;
				color: #22150B;
				line-height: 38rpx;
				margin-bottom: 15rpx;
			}
			.dec {
				font-weight: 500;
				font-size: 24rpx;
				color: #979797;
				line-height: 34rpx;
				margin-bottom: 15rpx;
			}
			.list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				.list_item {
					width: 49%;
					margin-bottom: 15rpx;
					background: #C8ECFE;
					border-radius: 28rpx 28rpx 28rpx 28rpx;
					&:nth-of-type(1) {
						margin-right: 10rpx;
					}
					.list_item_text {
						font-weight: bold;
						font-size: 28rpx;
						color: #22150B;
						line-height: 63rpx;
						text-align: center;
					}
					.list_item_code {
						margin: 0 auto;
						width: 292rpx;
						height: 292rpx;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						background-size: 100%;
						background-repeat: no-repeat;
					}
					.list_item_btn {
						width: 292rpx;
						height: 68rpx;	
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 63rpx;
						background: #5595FB;
						margin-top: 20rpx;
						margin-bottom: 20rpx;
						border-radius: 80rpx 80rpx 80rpx 80rpx;
					}
				}
			}
		}
	}
	
</style>